<template>
<form class="form" @submit.prevent="">
    <div class="form_content">
    账号：<input type="text" v-model.trim="user.account"><br/><br/>
    密码：<input type="password"  v-model="user.password"/><br/><br/>
    性别：
    男<input type="radio" name="sex" v-model="user.sex" value="male"/>
    女<input type="radio" name="sex" v-model="user.sex" value="female"><br/><br/>

    年龄:
    <input type="number" onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" v-model.number="user.age"><br/><br/>

    爱好：
    学习<input type="checkbox" v-model="user.hobits" value="study">
    烧烤<input type="checkbox" v-model="user.hobits" value="shaokao">
    打游戏<input type="checkbox" v-model="user.hobits" value="game"><br/><br/>

    地区：
    <select class="form_select" v-model="user.area">
      <option value="">请选择</option>
      <option value="shanghai">上海</option>
      <option value="beijing">北京</option>
      <option value="shenzhen">深圳</option>
      <option value="guangxi">广西</option>
    </select><br/><br/>

    其他信息：
    <textarea v-model.lazy="user.other"></textarea><br/><br/>

    <input type="checkbox" v-model="user.agree"> 阅读并接受<a href="#">《用户协议》</a><br/><br/>

    <button @click="submit">提价</button>

  </div>
</form>
</template>
<script>
export default {
  data() {
    return {
      user:{
        account: '',
        password: '',
        sex: 'female',
        age: '',
        hobits: [],
        area: '',
        other:'',
        agree: false

      }
    }
  },
  methods: {
    submit() {
      console.log('提交：',this.user);
    }
  }
}
</script>
<style scoped>
.form {
  width: 100%;
  height: calc(100vh - 140px);

}
.form_content{
  width: 300px;
  height: 400px;
   margin:0 auto;
}
.form_select {
  width: 150px;
}
</style>